---
import { Icon } from '@astrojs/starlight/components';
import Default from '@astrojs/starlight/components/PageTitle.astro';
import Version from '../Version.astro';

const { data } = Astro.locals.starlightRoute.entry;
---

{
	data.type === 'integration' ? (
		<div class="wrapper">
			<h1 id="_top">
				<>
					<span class="scope">@astrojs/</span>
					<span>{data.title.replace('@astrojs/', '')}</span>
				</>
			</h1>
			<div class="integration-metadata">
				<Version pkgName={data.title} />
				<a href={data.githubIntegrationURL}>
					<Icon size="1rem" name="github" /> GitHub
				</a>
				<a href={'https://www.npmjs.com/package/' + data.title}>
					<svg width="16" height="16" viewBox="0 0 576 512" fill="currentColor" aria-hidden="true">
						<path d="M288 288h-32v-64h32v64zm288-128v192H288v32H160v-32H0V160h576zm-416 32H32v128h64v-96h32v96h32V192zm160 0H192v160h64v-32h64V192zm224 0H352v128h64v-96h32v96h32v-96h32v96h32V192z" />
					</svg>
					npm
				</a>
				<a href={data.githubIntegrationURL + 'CHANGELOG.md'}>
					<Icon size="1rem" name="list-format" /> {Astro.locals.t('integrations.changelog')}
				</a>
			</div>
		</div>
	) : (
		<Default>
			<slot />
		</Default>
	)
}

<style>
	.wrapper {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	h1 {
		display: flex;
		flex-wrap: wrap;
		color: var(--sl-color-white);
		font-size: var(--sl-text-h1);
		font-weight: 600;
		line-height: var(--sl-line-height-headings);
	}
	.scope {
		color: var(--sl-color-text);
		font-weight: 400;
	}
	.integration-metadata {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 1rem;
		font-size: var(--sl-text-xs);
	}
	.integration-metadata a {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		text-decoration: none;
		color: var(--sl-color-text-accent);
	}
	.integration-metadata a:hover {
		color: var(--sl-color-white);
	}
	.integration-metadata svg {
		width: 1.5rem;
	}
</style>
